import React from "react";
import "./index.css";
import { Button, Checkbox, Form, Input } from "antd";
import { Navigate } from "react-router-dom";
export default class Login extends React.Component {
  state = {
    ok: false,
    username: "",
  };
  onFinish = (value) => {
    console.log(value);
    this.setState({ ok: true, username: value.username });
  };
  onFinishFailed = (value) => {
    console.log("err", value);
  };
  render() {
    const {} = this.props;
    const { ok } = this.state;
    return (
      <>
        <div className="input-box">
          {ok && <Navigate to="/home" state={this.state} replace="false" />}
          <Form
            name="basic"
            labelCol={{
              span: 8,
            }}
            wrapperCol={{
              span: 16,
            }}
            initialValues={{
              remember: true,
            }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
            autoComplete="off"
          >
            <Form.Item
              label="昵称"
              name="username"
              rules={[
                {
                  required: true,
                  message: "请输入用户名",
                },
              ]}
            >
              <Input />
            </Form.Item>

            <Form.Item
              label="密码"
              name="password"
              rules={[
                {
                  required: true,
                  message: "请输入密码",
                },
              ]}
            >
              <Input.Password />
            </Form.Item>

            <Form.Item
              name="remember"
              valuePropName="checked"
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Checkbox>记住我</Checkbox>
            </Form.Item>

            <Form.Item
              wrapperCol={{
                offset: 8,
                span: 16,
              }}
            >
              <Button type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        </div>
      </>
    );
  }
}
